import React, {memo, useState} from 'react';
import FilterBarStyle from "./FilterBarStyle";

/**
 * 时间 2024年1月10日 10点54分
 * 组件说明
 *  该组件主要用于筛选栏按钮展示
 * props说明
 *  filterList: 用于操作筛选对象数组
 *  这里我们数组必传的是 对象名称和对象值
 *  defaultBtn: 默认按钮,用于默认选中的效果
 *  如 全部
 *  如果不传递,将不会渲染
 *  callbackFunction: 父组件的回调函数,
 *  在回调时,会将已经选中的item的对象返回给父组件
 *  size: 筛选栏字体大小
 *
 *
 */
type Props = {
  // 这里老规矩,我们展示先使用any,
  // 等后期调用接口时,再将type确定下来
  filterList: Array<any>,
  defaultBtn?: String,
  callbackFunction?:any,
  size?:Number
};

export default memo(function FilterBar(props: Props) {
  const [currentIndex,setCurrentIndex]=useState(props.defaultBtn?-1:0);
  //这里我们需要定义一个方法
  //让父组件知道我们单击了哪一个item,并将item的value返回
  //注意: 这里的data应该是filterList的每个对象类型
  //这里我们展示定义为any,后期再改
  function liClickFunction(index:number,data?:any) {
    setCurrentIndex(index);
    //此时调用props中的回调函数,返回给父组件,好让父组件进行相应的操作
    //这里我们也要判断一下,否则报错,使用 ?. 也不行
    if (props.callbackFunction){
      props.callbackFunction(data);
    }

  }

  return (
    <FilterBarStyle
      $size={props.size}
    >
      {/*全部按钮是否展示*/}
      {
        props.defaultBtn?
          <li
            className={currentIndex === -1 ? "sing-screen-current" : ""}
            onClick={() => {
              liClickFunction(-1,null);
            }}
        >{props.defaultBtn}</li>:""
      }


      {
        props.filterList.map((item, index) => {
          return (<li
            key={index}
            className={currentIndex === index ? "sing-screen-current" : ""}
            onClick={()=>{
              liClickFunction(index,item)
            }}
        >
            {item.dictLabel}
        </li>)
        })
      }
    </FilterBarStyle>
  );
});
